<template>
  <div id="contractfrom">
    <!-- 创建、编辑、查看 -->
    <div v-if="!apply">
      <h1 v-if="!create">合同摘要</h1>
      <el-form label-width="130px" class="commonFrom">
        <el-form-item label="招标编号：" style="margin-bottom: 3px" v-if="!create">
          {{ contractObj.biddingNo }}
        </el-form-item>
        <el-form-item label="招标编号：" style="margin-bottom: 3px; margin-right: 500px" v-if="create && componyType">
          <el-select
            size="small"
            v-model.trim="contractObj.biddingId"
            placeholder="请选择招标编号"
            @change="projectChange"
          >
            <el-option v-for="item in projetOptions" :key="item.id" :label="item.biddingNo" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同编号：" style="margin-bottom: 3px" v-if="!create">
          {{ contractObj.contractNo }}
        </el-form-item>
        <el-form-item label="定标说明：" style="margin-bottom: 17px; width: 100% !important">
          {{ contractObj.reviewMind || '--' }}</el-form-item
        >
      </el-form>
      <h1>基本信息</h1>
      <el-form class="commonFrom" label-width="130px">
        <el-form-item label="采购商名称："> {{ contractObj.enterpriseName || '--' }}</el-form-item>
        <el-form-item label="工程名称：" style="width: auto !important">
          <span>{{ contractObj.proName || '--' }}</span>
          <span
            v-if="contractObj.proId"
            style="color: #fa7355; cursor: pointer; margin-left: 10px"
            @click="checkProDetail(contractObj.proId)"
            >查看详情</span
          >
        </el-form-item>
        <el-form-item label="签约采购商：" class="form-item">
          <div v-if="!check && componyType">
            <el-input v-model.trim="contractObj.contractBuyer" placeholder="请输入开票企业名称" size="small">
            </el-input>
            <span style="color: #fa7355; margin-left: 10px">选择为供应商开票的企业名称</span>
          </div>
          <div v-else>{{ contractObj.contractBuyer }}</div>
        </el-form-item>
        <el-form-item label="招标内容：" style="margin-right: 400px">
          {{ contractObj.biddingContent || '--' }}</el-form-item
        >
        <el-form-item label="交付地点：" style="width: 100% !important">
          <div v-if="!check && componyType">
            <el-select
              style="width: 150px"
              size="small"
              v-model.trim="contractObj.provinceId"
              placeholder="请选择省"
              @change="provinceChange($event, 'clear')"
            >
              <el-option
                v-for="item in provinceOptions"
                :key="item.provinceId"
                :label="item.province"
                :value="item.provinceId"
              >
              </el-option>
            </el-select>
            <el-select
              style="width: 150px; margin-left: 10px"
              size="small"
              v-model.trim="contractObj.cityId"
              placeholder="请选择市"
              @change="cityChange($event, 'clear')"
            >
              <el-option v-for="item in cityOptions" :key="item.cityId" :label="item.city" :value="item.cityId">
              </el-option>
            </el-select>
            <el-select
              style="width: 150px; margin-left: 10px"
              size="small"
              v-model.trim="contractObj.areaId"
              placeholder="请选择区"
              @change="areaChange"
            >
              <el-option v-for="item in areaOptions" :key="item.areaId" :label="item.area" :value="item.areaId">
              </el-option>
            </el-select>
            <el-input
              style="width: 280px; margin-left: 10px"
              size="small"
              placeholder="请填写详细地址"
              v-model.trim="contractObj.detailAddress"
            >
            </el-input>
          </div>
          <div v-else>
            {{ contractObj.province }}{{ contractObj.city }}{{ contractObj.area }}{{ contractObj.detailAddress }}
          </div>
        </el-form-item>
        <el-form-item label="合同形式：" style="width: 100% !important">
          <el-radio-group v-model.trim="contractObj.contractForm" v-if="!check && componyType">
            <el-radio :label="1">固定总价</el-radio>
            <el-radio :label="2">固定单价</el-radio>
            <el-radio :label="3">可调总价</el-radio>
            <el-radio :label="4">可调单价</el-radio>
            <el-radio :label="5">用户自定义</el-radio>
          </el-radio-group>
          <div v-else>{{ contractObj.contractForm | contractFormFilter }}</div>
        </el-form-item>
      </el-form>
      <h1>总采购清单</h1>
      <div v-if="check">
        <div style="margin: 20px 0">
          <p v-if="check">
            总合计：<span style="font-size: 24px; color: #333">{{ contractObj.contractAmount || 'xxxxx' }}</span
            >元
          </p>
        </div>
        <div class="bidding-table" style="margin-bottom: 20px">
          <el-table
            :data="biddListTotal"
            border
            class="bidding"
            ref="jdjgTable"
            :header-cell-style="cellStyle"
            :row-class-name="tabRowClassName"
          >
            <el-table-column width="60" align="center" type="index" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <!-- <el-table-column label="材料变更" align="center" prop="operationType" width="100" v-if="applyCheck">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.operationType == 1 ? '新增' : scope.row.operationType == 2 ? '修改' : '删除' }}
                </div>
              </template>
            </el-table-column> -->
            <el-table-column label="材料名称" align="center" prop="materialName" width="160"> </el-table-column>
            <el-table-column label="规格型号" align="center" prop="model" width="160"> </el-table-column>
            <el-table-column label="单位" align="center" prop="company" width="80"> </el-table-column>
            <el-table-column label="参数指标" align="center" prop="parameterIndex" width="160"> </el-table-column>
            <el-table-column label="品牌产地" align="center" prop="brandOrigin" width="160"> </el-table-column>
            <el-table-column label="数量" align="center" prop="purchaseQuantity" width="120"> </el-table-column>
            <el-table-column label="已验收数量" align="center" prop="quantityReceived" width="180" v-if="checkEff">
            </el-table-column>
            <el-table-column label="单价" align="center" prop="unitPrice" width="120"> </el-table-column>
            <el-table-column label="税率(%)" align="center" prop="taxRate" width="80"> </el-table-column>
            <el-table-column label="不含税金额" align="center" prop="excludingTax" width="140"> </el-table-column>
            <el-table-column label="税金" align="center" prop="taxes" width="140"> </el-table-column>
            <el-table-column label="价税合计" align="center" prop="totalPrice" width="160" fixed="right">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-else>
        <div style="margin: 20px 0">
          <h4>标书内材料清单：</h4>
          <div class="buyfrom">
            <el-button
              size="small"
              type="primary"
              class="commonBtn1"
              icon="iconfont icon-add"
              @click="addMaterial('标书内')"
              v-if="!check && componyType"
            >
              添加标书内材料
            </el-button>
            <p v-if="check">
              总合计：<span style="font-size: 24px; color: #333">{{ contractObj.contractAmount || 'xxxxx' }}</span
              >元
            </p>
            <p v-else>
              总合计：<span style="font-size: 24px; color: #333">{{ contractAmount }}</span
              >元
            </p>
          </div>
        </div>
        <div class="bidding-table" style="margin-bottom: 20px">
          <el-table
            :data="inBiddList"
            border
            class="bidding"
            ref="jdjgTable"
            :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
            :row-class-name="tabRowClassName"
          >
            <el-table-column width="60" align="center" type="index" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="材料名称" align="center" prop="materialName" width="160"> </el-table-column>
            <el-table-column label="规格型号" align="center" prop="model" width="160"> </el-table-column>
            <el-table-column label="单位" align="center" prop="company" width="80"> </el-table-column>
            <el-table-column label="参数指标" align="center" prop="parameterIndex" width="160">
              <template slot-scope="scope">
                <div>
                  <el-input
                    v-model.trim="scope.row.parameterIndex"
                    placeholder="请输入参数指标"
                    size="small"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="品牌产地" align="center" prop="brandOrigin" width="160">
              <template slot-scope="scope">
                <div>
                  <el-input v-model.trim="scope.row.brandOrigin" placeholder="请输入品牌产地" size="small"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" prop="purchaseQuantity" width="120">
              <template slot-scope="scope">
                <div>
                  <el-input
                    v-model.trim="scope.row.purchaseQuantity"
                    placeholder="请输入数量"
                    size="small"
                    @input="contractPrice($event, scope.$index, 'purchaseQuantity')"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单价" align="center" prop="unitPrice" width="120">
              <template slot-scope="scope">
                <div>
                  <el-input
                    v-model.trim="scope.row.unitPrice"
                    placeholder="请输入单价"
                    size="small"
                    @input="contractPrice($event, scope.$index, 'unitPrice')"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="税率(%)" align="center" prop="taxRate" width="80"> </el-table-column>
            <el-table-column label="不含税金额" align="center" prop="excludingTax" width="140"> </el-table-column>
            <el-table-column label="税金" align="center" prop="taxes" width="140"> </el-table-column>
            <el-table-column label="价税合计" align="center" prop="totalPrice" width="160" fixed="right">
            </el-table-column>
            <el-table-column label="操作" align="center" width="80px" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" class="ty czBtn" @click="delTableItem(scope.$index)"> 删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin: 20px 0">
          <h4>标书外材料清单：</h4>
          <div class="buyfrom" v-if="!check && componyType">
            <el-button
              size="small"
              type="primary"
              class="commonBtn1"
              icon="iconfont icon-add"
              @click="addMaterial('标书外')"
            >
              添加标书外材料
            </el-button>
          </div>
        </div>
        <div class="bidding-table" style="margin-bottom: 20px">
          <el-table
            v-show="tableShow"
            :data="biddMaterials"
            border
            class="bidding"
            ref="jdjgTable"
            :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
            :row-class-name="tabRowClassName"
          >
            <el-table-column width="60" align="center" type="index" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="材料名称" align="center" prop="materialId" width="160">
              <template slot-scope="scope">
                <el-select
                  v-model.trim="scope.row.materialId"
                  placeholder="请选择"
                  @change="typeChange($event, scope.$index)"
                  size="small"
                >
                  <el-option
                    v-for="item in materialList"
                    :label="item.materialName"
                    :value="item.materialId"
                    :key="item.materialId"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="规格型号" align="center" prop="model" width="160">
              <template slot-scope="scope">
                <el-select
                  size="small"
                  v-model.trim="scope.row.model"
                  placeholder="请选择"
                  @change="categoryChange"
                  @visible-change="selectFocus($event, scope.row.materialId)"
                >
                  <el-option
                    v-for="item in scope.row.modelSelectList"
                    :label="item.specsName"
                    :value="item.specsName"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center" prop="company" width="80"> </el-table-column>
            <el-table-column label="参数指标" align="center" prop="parameterIndex" width="160">
              <template slot-scope="scope">
                <div>
                  <el-input
                    v-model.trim="scope.row.parameterIndex"
                    placeholder="请输入参数指标"
                    size="small"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="品牌产地" align="center" prop="brandOrigin" width="160">
              <template slot-scope="scope">
                <div>
                  <el-input v-model.trim="scope.row.brandOrigin" placeholder="请输入品牌产地" size="small"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" prop="purchaseQuantity" width="120">
              <template slot-scope="scope">
                <div>
                  <el-input
                    v-model.trim="scope.row.purchaseQuantity"
                    placeholder="请输入数量"
                    size="small"
                    @input="contractPriceCopy($event, scope.$index, 'purchaseQuantity')"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单价" align="center" prop="unitPrice" width="120">
              <template slot-scope="scope">
                <div>
                  <el-input
                    v-model.trim="scope.row.unitPrice"
                    placeholder="请输入单价"
                    size="small"
                    @input="contractPriceCopy($event, scope.$index, 'unitPrice')"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="税率(%)" align="center" prop="taxRate" width="80"> </el-table-column>
            <el-table-column label="不含税金额" align="center" prop="excludingTax" width="140"> </el-table-column>
            <el-table-column label="税金" align="center" prop="taxes" width="140"> </el-table-column>
            <el-table-column label="价税合计" align="center" prop="totalPrice" width="160" fixed="right">
            </el-table-column>
            <el-table-column label="操作" align="center" width="80px" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" class="ty czBtn" @click="delTableItemBid(scope.$index)"> 删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <h1>付款约定</h1>
      <el-input
        type="textarea"
        :autosize="{ minRows: 3 }"
        placeholder="请输入付款约定"
        v-model.trim="contractObj.paymentAgreement"
        style="margin: 20px 0"
        v-if="!check && componyType"
      >
      </el-input>
      <div v-else style="margin: 20px 0">{{ contractObj.paymentAgreement || '----' }}</div>
      <h1>发票及税金</h1>
      <el-form class="commonFrom" label-width="130px" style="width: 100%; margin-bottom: 16px">
        <el-form-item label="报价要求：">
          <div v-if="!check && componyType">
            <el-radio
              v-for="(item, index) in quoteOptions"
              :key="index"
              v-model.trim="contractObj.quotationRequest"
              :label="item.dictKey"
              >{{ item.dictValue }}</el-radio
            >
          </div>
          <div v-else>{{ contractObj.quotationRequest === 1 ? '含税' : '不含税' }}</div>
        </el-form-item>
        <el-form-item style="width: 60% !important" label="发票要求：">
          <div v-if="!check && componyType">
            <el-radio
              v-for="(item, index) in invoiceOptions"
              :key="index"
              v-model.trim="contractObj.invoiceRequirements"
              :label="item.dictKey"
            >
              {{ item.dictValue }}
              <span v-if="contractObj.invoiceRequirements === item.dictKey">
                <el-select
                  size="small"
                  v-model.trim="contractObj.taxRate"
                  placeholder="请选择"
                  @change="taxRateChange"
                  style="width: 90px"
                >
                  <el-option v-for="item in taxRateOptions" :key="item.id" :label="item.label" :value="item.num">
                  </el-option>
                </el-select>
                %税率
              </span>
            </el-radio>
          </div>
          <div v-else>
            {{
              contractObj.invoiceRequirements === 1
                ? '增值税专用发票'
                : contractObj.invoiceRequirements === 2
                ? '增值税普通发票'
                : '增值税电子发票'
            }}
            税率{{ contractObj.taxRate }}%
          </div>
        </el-form-item>
        <el-form-item style="width: 60% !important; margin-bottom: 0 !important" label="履约保证金：">
          <el-input
            style="width: 180px"
            size="small"
            ref="performanceBond"
            placeholder="请输入金额"
            v-if="!check && componyType"
            v-model.trim="contractObj.margin"
            @change="decimalChange($event, 'performanceBond')"
          >
            <p slot="suffix" style="color: #333">万元</p>
          </el-input>
          <div v-else>{{ contractObj.margin }}(万元)</div>
        </el-form-item>
      </el-form>
      <h1>联系方式</h1>
      <el-form class="commonFrom" label-width="130px" style="margin: 16px 0">
        <el-form-item label="采购方联系人：" style="margin-bottom: 14px !important">
          <el-input
            v-if="!check && componyType"
            style="width: 220px"
            class="no_border"
            disabled
            size="small"
            placeholder="请选择采购方联系人："
            v-model.trim="contractObj.procurementContact"
          >
            <el-button @click="personnelSelect('contact', '')" slot="append">选择</el-button>
          </el-input>
          <div v-else>{{ contractObj.procurementContact }}</div>
        </el-form-item>
        <el-form-item label="采购方联系电话：" style="margin-bottom: 14px !important">
          {{ contractObj.contactPhone ? contractObj.contactPhone : '--' }}
        </el-form-item>
        <el-form-item label="验收联系人：" style="margin-bottom: 14px !important">
          <el-input
            style="width: 220px"
            class="no_border"
            v-if="!check && componyType"
            disabled
            size="small"
            placeholder="请选择验收联系人"
            v-model.trim="contractObj.acceptanceContact"
          >
            <el-button @click="personnelSelect('technology', '')" slot="append">选择</el-button>
          </el-input>
          <div v-else>{{ contractObj.acceptanceContact }}</div>
        </el-form-item>
        <el-form-item label="验收联系电话：" style="margin-bottom: 14px !important">
          {{ contractObj.technologyPhone ? contractObj.technologyPhone : '--' }}
        </el-form-item>
        <el-form-item label="供应商联系人：" style="margin-bottom: 0 !important">
          <el-input
            style="width: 220px"
            class="no_border"
            disabled
            size="small"
            v-if="!check && !componyType"
            placeholder="请选择供应商联系人"
            v-model.trim="contractObj.supplierContact"
          >
            <el-button @click="personnelSelect('supplier', '')" slot="append">选择</el-button>
          </el-input>
          <div v-else-if="check && !componyType">{{ contractObj.supplierContact }}</div>
          <div v-else-if="check && componyType">{{ contractObj.supplierContact || '待供应商选择联系人' }}</div>
          <div v-else>待供应商选择联系人</div>
        </el-form-item>
        <el-form-item label="供应商联系电话：" style="margin-bottom: 0 !important">
          <div v-if="componyType">
            {{ contractObj.scTechnologyPhone || '待供应商选择联系人' }}
          </div>
          <div v-else>{{ contractObj.scTechnologyPhone || '--' }}</div>
        </el-form-item>
      </el-form>
      <h1>合同文件</h1>
      <el-form label-width="130px" style="margin: 7px 0 0">
        <el-form-item label="合同签署方式：" style="margin-bottom: 0">
          <el-radio-group v-model.trim="contractObj.signingMethod" v-if="!check && componyType">
            <el-radio :label="1">密码签署</el-radio>
            <el-radio :label="2">电子印章签署</el-radio>
          </el-radio-group>
          <div v-else>{{ contractObj.signingMethod === 1 ? '密码签署' : '电子印章签署' }}</div>
        </el-form-item>
        <el-form-item :label="check ? '合同文件下载：' : '合同文件上传：'" style="margin-bottom: 0px">
          <div v-if="!check && componyType">
            <el-button size="small" type="primary" class="commonBtn1" @click="uploadClick"> 上传附件 </el-button>
            <el-button size="small" class="commonBtn" @click="fileDownload">文件模版下载</el-button>
            <p class="contract_file">请上传doc、docx、pdf文件</p>
          </div>
          <div v-if="!check" class="upload-wrap">
            <el-upload
              class="upload-demo"
              :headers="loadHeader"
              multiple
              accept=".doc,.docx,.pdf"
              :action="urlUpload"
              :on-remove="fileRemove"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
              :on-exceed="onExceed"
              :file-list="fileList"
            >
              <template slot="trigger">
                <div ref="biddUpload"></div>
              </template>
            </el-upload>
          </div>
          <div v-else class="download">
            <el-upload class="upload-demo" multiple :file-list="fileList" action :on-preview="downFile">
              <template slot="trigger">
                <div ref="biddUpload"></div>
              </template>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>
      <h1 v-if="!check && componyType">
        审核人员
        <span>（未选择的审核人员不会保存）</span>
      </h1>
      <el-button
        size="small"
        type="primary"
        class="commonBtn1 mgn"
        icon="iconfont icon-add"
        @click="addReviewer"
        v-if="!check && componyType"
        >添加审核人员</el-button
      >
      <el-form class="commonFrom auditfrom" label-width="130px" v-if="!check && componyType">
        <el-form-item
          v-for="(item, index) in reviewerList"
          :key="index"
          :label="'审核人员' + (index + 1) + '：'"
          :style="index == 4 ? 'margin-bottom: 20px !important' : ''"
        >
          <el-input
            style="width: 220px"
            class="no_border"
            disabled
            size="small"
            placeholder="请选择审核人员"
            v-model.trim="item.reviewer"
          >
            <el-button @click="personnelSelect('reviewer', index)" slot="append">选择</el-button>
          </el-input>
          <i class="iconfont icon-guanbianniu" @click="colseReviewer(index)"></i>
        </el-form-item>
      </el-form>
      <h1>验收人员<span style="color: #fa7355; margin-left: 10px">提前指定采购材料的现场验收人</span></h1>
      <el-form class="commonFrom" :style="applyCheck ? 'margin-bottom:52px' : ''" label-width="130px">
        <el-form-item label="验收人：" :style="!check && componyType ? 'margin-top:13px;margin-bottom:0' : ''">
          <el-input
            v-if="!check && componyType"
            style="width: 220px"
            class="no_border"
            disabled
            size="small"
            placeholder="请选择验收人："
            v-model.trim="contractObj.acceptor"
          >
            <el-button @click="personnelSelect('acceptor', '')" slot="append">选择</el-button>
          </el-input>
          <div v-else>{{ contractObj.acceptor }}</div>
        </el-form-item>
      </el-form>
      <div class="footer" v-if="!check">
        <el-button size="small" class="commonBtn" @click="closeBtn">取消</el-button>
        <el-button size="small" class="commonBtn" @click="saveBtn">保存</el-button>
        <el-button size="small" class="commonBtn1" @click="subBtn">确定</el-button>
      </div>
      <div class="footer" v-if="check && signed" key="footer" style="margin-top: 21px">
        <el-button size="small" class="commonBtn1" @click="signedBtn">签订合同</el-button>
      </div>
      <div v-if="applyCheck" class="applyBtn">
        <el-button size="small" class="commonBtn" @click="applyCancel">申请取消</el-button>
        <el-button size="small" class="commonBtn1" @click="applyVisiableShow">申请变更</el-button>
      </div>
    </div>
    <!-- 变更 -->
    <div v-else>
      <h1>合同摘要</h1>
      <el-form label-width="130px" class="commonFrom">
        <el-form-item label="招标编号：" style="margin-bottom: 3px">
          {{ contractObj.biddingNo }}
        </el-form-item>

        <el-form-item label="合同编号：" style="margin-bottom: 3px">
          {{ contractObj.contractNo }}
        </el-form-item>
        <el-form-item label="定标说明：" style="margin-bottom: 17px; width: 100% !important">
          {{ contractObj.reviewMind }}</el-form-item
        >
      </el-form>
      <h1>基本信息</h1>
      <el-form class="commonFrom" label-width="130px">
        <el-form-item label="采购商名称："> {{ contractObj.enterpriseName }}</el-form-item>
        <el-form-item label="工程名称：" style="width: auto !important">
          <span>{{ contractObj.proName }}</span>
          <span style="color: #fa7355; cursor: pointer; margin-left: 10px" @click="checkProDetail(contractObj.proId)"
            >查看详情</span
          >
        </el-form-item>
        <el-form-item label="签约采购商：" class="form-item">
          <div>{{ contractObj.contractBuyer }}</div>
        </el-form-item>
        <el-form-item label="招标内容：" style="margin-right: 400px"> {{ contractObj.biddingContent }}</el-form-item>
        <el-form-item label="交付地点：" style="width: 100% !important">
          <div>
            <el-select
              style="width: 150px"
              size="small"
              v-model.trim="contractObj.provinceId"
              placeholder="请选择省"
              @change="provinceChange($event, 'clear')"
            >
              <el-option
                v-for="item in provinceOptions"
                :key="item.provinceId"
                :label="item.province"
                :value="item.provinceId"
              >
              </el-option>
            </el-select>
            <el-select
              style="width: 150px; margin-left: 10px"
              size="small"
              v-model.trim="contractObj.cityId"
              placeholder="请选择市"
              @change="cityChange($event, 'clear')"
            >
              <el-option v-for="item in cityOptions" :key="item.cityId" :label="item.city" :value="item.cityId">
              </el-option>
            </el-select>
            <el-select
              style="width: 150px; margin-left: 10px"
              size="small"
              v-model.trim="contractObj.areaId"
              placeholder="请选择区"
              @change="areaChange"
            >
              <el-option v-for="item in areaOptions" :key="item.areaId" :label="item.area" :value="item.areaId">
              </el-option>
            </el-select>
            <el-input
              style="width: 280px; margin-left: 10px"
              size="small"
              placeholder="请填写详细地址"
              v-model.trim="contractObj.detailAddress"
            >
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="合同形式：" style="width: 100% !important">
          <el-radio-group v-model.trim="contractObj.contractForm">
            <el-radio :label="1">固定总价</el-radio>
            <el-radio :label="2">固定单价</el-radio>
            <el-radio :label="3">可调总价</el-radio>
            <el-radio :label="4">可调单价</el-radio>
            <el-radio :label="5">用户自定义</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <h1>总采购清单</h1>
      <div>
        <div style="margin: 20px 0">
          <h4>标书内材料清单：</h4>
          <div class="buyfrom">
            <el-button
              size="small"
              type="primary"
              class="commonBtn1"
              icon="iconfont icon-add"
              @click="addMaterial('标书内')"
            >
              添加标书内材料
            </el-button>
            <p>
              总合计：<span style="font-size: 24px; color: #333">{{ contractAmount }}</span
              >元
            </p>
          </div>
        </div>
        <div class="bidding-table" style="margin-bottom: 20px">
          <el-table
            :data="inBiddList"
            border
            class="bidding"
            ref="jdjgTable"
            :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
            :row-class-name="tabRowClassName"
          >
            <el-table-column width="60" align="center" type="index" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="材料名称" align="center" prop="materialName" width="160"> </el-table-column>
            <el-table-column label="规格型号" align="center" prop="model" width="160"> </el-table-column>
            <el-table-column label="单位" align="center" prop="company" width="80"> </el-table-column>
            <el-table-column label="参数指标" align="center" prop="parameterIndex" width="160">
              <template slot-scope="scope">
                <div>
                  <el-input
                    v-model.trim="scope.row.parameterIndex"
                    placeholder="请输入参数指标"
                    size="small"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="品牌产地" align="center" prop="brandOrigin" width="160">
              <template slot-scope="scope">
                <div>
                  <el-input v-model.trim="scope.row.brandOrigin" placeholder="请输入品牌产地" size="small"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" prop="purchaseQuantity" width="120">
              <template slot-scope="scope">
                <div>
                  <el-input
                    v-model.trim="scope.row.purchaseQuantity"
                    placeholder="请输入数量"
                    size="small"
                    @input="contractPrice($event, scope.$index, 'purchaseQuantity')"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单价" align="center" prop="unitPrice" width="120">
              <template slot-scope="scope">
                <div>
                  <el-input
                    v-model.trim="scope.row.unitPrice"
                    placeholder="请输入单价"
                    size="small"
                    @input="contractPrice($event, scope.$index, 'unitPrice')"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="税率(%)" align="center" prop="taxRate" width="80"> </el-table-column>
            <el-table-column label="不含税金额" align="center" prop="excludingTax" width="140"> </el-table-column>
            <el-table-column label="税金" align="center" prop="taxes" width="140"> </el-table-column>
            <el-table-column label="价税合计" align="center" prop="totalPrice" width="160" fixed="right">
            </el-table-column>
            <el-table-column label="操作" align="center" width="80px" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" class="ty czBtn" @click="delTableItem(scope.$index)"> 删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin: 20px 0">
          <h4>标书外材料清单：</h4>
          <div class="buyfrom">
            <el-button
              size="small"
              type="primary"
              class="commonBtn1"
              icon="iconfont icon-add"
              @click="addMaterial('标书外')"
            >
              添加标书外材料
            </el-button>
          </div>
        </div>
        <div class="bidding-table" style="margin-bottom: 20px">
          <el-table
            v-show="tableShow"
            :data="biddMaterials"
            border
            class="bidding"
            ref="jdjgTable"
            :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
            :row-class-name="tabRowClassName"
          >
            <el-table-column width="60" align="center" type="index" label="序号">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="材料名称" align="center" prop="materialId" width="160">
              <template slot-scope="scope">
                <el-select
                  v-model.trim="scope.row.materialId"
                  placeholder="请选择"
                  @change="typeChange($event, scope.$index)"
                  size="small"
                >
                  <el-option
                    v-for="item in materialList"
                    :label="item.materialName"
                    :value="item.materialId"
                    :key="item.materialId"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="规格型号" align="center" prop="model" width="160">
              <template slot-scope="scope">
                <el-select
                  size="small"
                  v-model.trim="scope.row.model"
                  placeholder="请选择"
                  @change="categoryChange"
                  @visible-change="selectFocus($event, scope.row.materialId)"
                >
                  <el-option
                    v-for="item in scope.row.modelSelectList"
                    :label="item.specsName"
                    :value="item.specsName"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center" prop="company" width="80"> </el-table-column>
            <el-table-column label="参数指标" align="center" prop="parameterIndex" width="160">
              <template slot-scope="scope">
                <div>
                  <el-input
                    v-model.trim="scope.row.parameterIndex"
                    placeholder="请输入参数指标"
                    size="small"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="品牌产地" align="center" prop="brandOrigin" width="160">
              <template slot-scope="scope">
                <div>
                  <el-input v-model.trim="scope.row.brandOrigin" placeholder="请输入品牌产地" size="small"></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="数量" align="center" prop="purchaseQuantity" width="120">
              <template slot-scope="scope">
                <div>
                  <el-input
                    v-model.trim="scope.row.purchaseQuantity"
                    placeholder="请输入数量"
                    size="small"
                    @input="contractPriceCopy($event, scope.$index, 'purchaseQuantity')"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单价" align="center" prop="unitPrice" width="120">
              <template slot-scope="scope">
                <div>
                  <el-input
                    v-model.trim="scope.row.unitPrice"
                    placeholder="请输入单价"
                    size="small"
                    @input="contractPriceCopy($event, scope.$index, 'unitPrice')"
                  ></el-input>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="税率(%)" align="center" prop="taxRate" width="80"> </el-table-column>
            <el-table-column label="不含税金额" align="center" prop="excludingTax" width="140"> </el-table-column>
            <el-table-column label="税金" align="center" prop="taxes" width="140"> </el-table-column>
            <el-table-column label="价税合计" align="center" prop="totalPrice" width="160" fixed="right">
            </el-table-column>
            <el-table-column label="操作" align="center" width="80px" fixed="right"> </el-table-column>
          </el-table>
        </div>
      </div>
      <h1>付款约定</h1>
      <el-input
        type="textarea"
        :autosize="{ minRows: 3 }"
        placeholder="请输入付款约定"
        v-model.trim="contractObj.paymentAgreement"
        style="margin: 20px 0"
      >
      </el-input>
      <h1>发票及税金</h1>
      <el-form class="commonFrom" label-width="130px" style="width: 100%; margin-bottom: 16px">
        <el-form-item label="报价要求：">
          <div>
            <el-radio
              v-for="(item, index) in quoteOptions"
              :key="index"
              v-model.trim="contractObj.quotationRequest"
              :label="item.dictKey"
              >{{ item.dictValue }}</el-radio
            >
          </div>
        </el-form-item>
        <el-form-item style="width: 60% !important" label="发票要求：">
          <div>
            <el-radio
              v-for="(item, index) in invoiceOptions"
              :key="index"
              v-model.trim="contractObj.invoiceRequirements"
              :label="item.dictKey"
            >
              {{ item.dictValue }}
              <span v-if="contractObj.invoiceRequirements === item.dictKey">
                <el-select
                  size="small"
                  v-model.trim="contractObj.taxRate"
                  placeholder="请选择"
                  @change="taxRateChange"
                  style="width: 90px"
                >
                  <el-option v-for="item in taxRateOptions" :key="item.id" :label="item.label" :value="item.num">
                  </el-option>
                </el-select>
                %税率
              </span>
            </el-radio>
          </div>
        </el-form-item>
        <el-form-item style="width: 60% !important; margin-bottom: 0 !important" label="履约保证金：">
          <el-input
            style="width: 180px"
            size="small"
            ref="performanceBond"
            placeholder="请输入金额"
            v-model.trim="contractObj.margin"
            @change="decimalChange($event, 'performanceBond')"
          >
            <p slot="suffix" style="color: #333">万元</p>
          </el-input>
        </el-form-item>
      </el-form>
      <h1>联系方式</h1>
      <el-form class="commonFrom" label-width="130px" style="margin: 16px 0">
        <el-form-item label="采购方联系人：" style="margin-bottom: 14px !important">
          <el-input
            v-if="componyType"
            style="width: 220px"
            class="no_border"
            disabled
            size="small"
            placeholder="请选择采购方联系人："
            v-model.trim="contractObj.procurementContact"
          >
            <el-button @click="personnelSelect('contact', '')" slot="append">选择</el-button>
          </el-input>
          <div v-else>{{ contractObj.procurementContact }}</div>
        </el-form-item>
        <el-form-item label="采购方联系电话：" style="margin-bottom: 14px !important">
          {{ contractObj.contactPhone ? contractObj.contactPhone : '--' }}
        </el-form-item>
        <el-form-item label="验收联系人：" style="margin-bottom: 14px !important">
          <el-input
            style="width: 220px"
            class="no_border"
            v-if="componyType"
            disabled
            size="small"
            placeholder="请选择验收联系人"
            v-model.trim="contractObj.acceptanceContact"
          >
            <el-button @click="personnelSelect('technology', '')" slot="append">选择</el-button>
          </el-input>
          <div v-else>{{ contractObj.acceptanceContact }}</div>
        </el-form-item>
        <el-form-item label="验收联系电话：" style="margin-bottom: 14px !important">
          {{ contractObj.technologyPhone ? contractObj.technologyPhone : '--' }}
        </el-form-item>
        <el-form-item label="供应商联系人：" style="margin-bottom: 0 !important">
          <el-input
            style="width: 220px"
            class="no_border"
            disabled
            size="small"
            v-if="!componyType"
            placeholder="请选择供应商联系人"
            v-model.trim="contractObj.supplierContact"
          >
            <el-button @click="personnelSelect('supplier', '')" slot="append">选择</el-button>
          </el-input>
          <div v-else>{{ contractObj.supplierContact || '--' }}</div>
        </el-form-item>
        <el-form-item label="供应商联系电话：" style="margin-bottom: 0 !important">
          <div>{{ contractObj.scTechnologyPhone || '--' }}</div>
        </el-form-item>
      </el-form>
      <h1>合同文件</h1>
      <el-form label-width="130px" style="margin: 7px 0 0">
        <el-form-item label="合同签署方式：" style="margin-bottom: 0">
          <div>{{ contractObj.signingMethod === 1 ? '密码签署' : '电子印章签署' }}</div>
        </el-form-item>
        <el-form-item label="合同文件上传：" style="margin-bottom: 0px">
          <div>
            <el-button size="small" type="primary" class="commonBtn1" @click="uploadClick"> 上传附件 </el-button>
            <el-button size="small" class="commonBtn" @click="fileDownload">文件模版下载</el-button>
            <p class="contract_file">请上传doc、docx、pdf文件</p>
          </div>
          <div class="upload-wrap">
            <el-upload
              class="upload-demo"
              :headers="loadHeader"
              multiple
              accept=".doc,.docx,.pdf"
              :action="urlUpload"
              :on-remove="fileRemove"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
              :on-exceed="onExceed"
              :file-list="fileList"
            >
              <template slot="trigger">
                <div ref="biddUpload"></div>
              </template>
            </el-upload>
          </div>
        </el-form-item>
      </el-form>

      <h1>验收人员<span style="color: #fa7355; margin-left: 10px">提前指定采购材料的现场验收人</span></h1>
      <el-form class="commonFrom" label-width="130px">
        <el-form-item label="验收人：">
          <el-input
            v-if="componyType"
            style="width: 220px"
            class="no_border"
            disabled
            size="small"
            placeholder="请选择验收人："
            v-model.trim="contractObj.acceptor"
          >
            <el-button @click="personnelSelect('acceptor', '')" slot="append">选择</el-button>
          </el-input>
          <div v-else>{{ contractObj.acceptor }}</div>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button size="small" class="commonBtn" @click="applyVisiableCancel">取消</el-button>
        <el-button size="small" class="commonBtn1" @click="subBtn">确定</el-button>
      </div>
    </div>

    <el-dialog
      width="850px"
      :center="true"
      append-to-body
      title="添加标书内材料"
      :close-on-click-modal="false"
      :visible.sync="inTenderVisible"
      v-if="inTenderVisible"
    >
      <bidding-materials
        :biddingId="contractObj.biddingId"
        @close="inTenderClose"
        :taxRate="contractObj.taxRate"
        :list="inBiddList"
      ></bidding-materials>
    </el-dialog>
    <el-dialog
      class="dialog_detail"
      :center="true"
      append-to-body
      :close-on-click-modal="false"
      width="1200px"
      title="选择新品类"
      :visible.sync="materialVisible"
      v-if="materialVisible"
    >
      <tertiary-material :list="[]" @close="materialClose"> </tertiary-material>
    </el-dialog>
    <el-dialog
      width="765px"
      :center="true"
      append-to-body
      title="选择联系人"
      :close-on-click-modal="false"
      :visible.sync="personVisible"
      v-if="personVisible"
    >
      <personnel-select :type="personType" @close="personClose" :index="reviewerIndex"></personnel-select>
    </el-dialog>
    <el-dialog
      width="918px"
      :center="true"
      append-to-body
      title="密码签署确认"
      :close-on-click-modal="false"
      :visible.sync="signedVisiable"
      v-if="signedVisiable"
    >
      <h1>合同摘要</h1>
      <el-form class="signedFrom" label-width="115px" :inline="true">
        <el-form-item label="招标编号 "> {{ signedFrom.time }}</el-form-item>
        <el-form-item label="合同编号："> {{ signedFrom.No }}</el-form-item>
        <el-form-item label="合同金额："> {{ signedFrom.price }}元</el-form-item>
        <el-form-item label="合同形式："> {{ signedFrom.type | contractFormFilter }}</el-form-item>
        <el-form-item label="工程名称："> {{ signedFrom.proName }}</el-form-item>
        <el-form-item label="交付地点："> {{ signedFrom.address }}</el-form-item>
        <el-form-item label="采购商名称："> {{ signedFrom.biddingName }}</el-form-item>
        <el-form-item label="供应商名称："> {{ signedFrom.bidName }}</el-form-item>
        <el-form-item label="签约采购商：" style="margin-bottom: 4px !important">
          {{ signedFrom.signeBidding }}
        </el-form-item>
        <el-form-item label="采购员：" style="margin-bottom: 4px !important"> {{ signedFrom.biddingMan }}</el-form-item>
        <el-form-item label="账户选择：" style="margin-bottom: 12px !important" v-if="enterpriseType == 2">
          <el-select size="small" v-model.trim="publicBankAccountId" placeholder="请选择银行账号" style="width: 260px">
            <el-option v-for="item in bankOptions" :key="item.id" :label="item.accountName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开票抬头：" style="margin-bottom: 12px !important" v-if="enterpriseType == 1">
          <el-select size="small" v-model.trim="invoiceHeaderId" placeholder="请选择开票抬头" style="width: 260px">
            <el-option v-for="item in invoiceHeaderOptions" :key="item.id" :label="item.rise" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合同签署密码：" style="margin-bottom: 12px !important">
          <el-input
            style="width: 260px"
            size="small"
            placeholder="请输入6-12位字母、数字或常用字符"
            v-model.trim="contractPassword"
            show-password
          >
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码：">
          <el-input
            style="width: 260px"
            size="small"
            placeholder="请输入6-12位字母、数字或常用字符"
            v-model.trim="contractPasswordSure"
            show-password
          >
          </el-input>
        </el-form-item>
        <div style="color: #fa7355; padding: 6px 0 0 108px" v-if="componyType">
          确认签署后将密码告知供应商进行合同签署，双方输入密码一致合同成立。
        </div>
      </el-form>
      <div class="signfooter">
        <el-button size="small" class="commonBtn" @click="closeSign">取消</el-button>
        <el-button size="small" class="commonBtn1" @click="subSign">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      width="553px"
      :center="true"
      title="工程详情"
      append-to-body
      class="pro_dialog"
      :close-on-click-modal="false"
      :visible.sync="projectVisible"
      v-if="projectVisible"
    >
      <el-form label-width="80px">
        <el-form-item label="工程编号: " style="margin-bottom: 0 !important"> {{ projectFrom.proNo }}</el-form-item>
        <el-form-item label="工程名称: " style="margin-bottom: 0 !important">
          {{ projectFrom.proName }}
        </el-form-item>
        <el-form-item label="建设单位: " style="margin-bottom: 0 !important">
          {{ projectFrom.developmentUnit }}
        </el-form-item>
        <el-form-item label="施工单位: " style="margin-bottom: 0 !important">
          {{ projectFrom.constructUnit }}
        </el-form-item>
        <el-form-item label="监理单位: " style="margin-bottom: 0 !important">
          {{ projectFrom.constructControlUnit }}
        </el-form-item>
        <el-form-item label="勘察单位: " style="margin-bottom: 0 !important">
          {{ projectFrom.surveyUnit }}
        </el-form-item>
        <el-form-item label="设计单位: " style="margin-bottom: 0 !important">
          {{ projectFrom.designUnit }}
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      width="1200px"
      :center="true"
      title="变更合同"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="conVisible"
      v-if="conVisible"
    >
      <contract-from
        :apply="true"
        :check="false"
        :contractId="contractId"
        :create="false"
        :checkEff="false"
        :signed="false"
        :isReduce="true"
        :componyType="componyType"
        @applys="applys"
        @applyclose="applyclose"
      ></contract-from>
    </el-dialog>
  </div>
</template>

<script>
import personnelSelect from './PersonnelSelect.vue'
import tertiaryMaterial from './TertiaryMaterial'
import BiddingMaterials from './BiddingMaterials.vue'
export default {
  name: 'contractFrom',
  components: { BiddingMaterials, personnelSelect, tertiaryMaterial },
  props: {
    // 是否递归组件
    isReduce: {
      type: Boolean,
      default: false
    },
    // 变更查看合同
    applyCheck: {
      type: Boolean
    },
    // 查看已生效
    checkEff: {
      type: Boolean
    },
    // 是否为申请变更操作
    apply: {
      type: Boolean
    },
    check: {
      // 是否为查看
      type: Boolean,
      require: true
    },
    componyType: {
      // 企业类型 true为采购商 false为供应商
      type: Boolean,
      require: true
    },
    componyName: {
      // 企业名称
      type: String
    },
    create: {
      // 是否为创建
      type: Boolean,
      require: true
    },
    contractId: {
      //合同id
      type: [String, Number]
    },
    signed: {
      // 是否显示签订合同按钮
      type: Boolean
    },
    biddingId: {
      //判断是否是从中标页面创建合同
      type: [String, Number]
    },
    historyObj: {
      // 历史记录对象
      type: Object
    }
  },
  data() {
    return {
      enterpriseType: localStorage.getItem('enterpriseType'),
      publicBankAccountId: '',
      invoiceHeaderOptions: [],
      invoiceHeaderId: '',
      bankOptions: [],
      num: 0,
      fileSuccess: true,
      urlUpload: this.GLOBAL.weburl + '/api/file/upload',
      fileList: [],
      timer: null,
      fileTemplateUrl: '',
      contractPassword: '',
      contractPasswordSure: '',
      biddListTotal: [],
      contractAmount: 0,
      signedVisiable: false,
      conVisible: false,
      materialVisible: false,
      personVisible: false,
      personType: '',
      reviewerIndex: '',
      inTenderVisible: false,
      input: '',
      radio: '',
      tableShow: false,
      projectFrom: {},
      projectVisible: false,
      inBiddList: [],
      biddMaterials: [],
      materialList: [],
      projetOptions: [],
      biddFrom: [],
      contractObj: {},
      signedFrom: {
        time: '',
        No: '',
        price: '',
        type: '',
        proName: '',
        address: '',
        biddingName: '',
        bidName: '',
        signeBidding: '',
        biddingMan: ''
      },
      reviewerList: [
        {
          reviewer: '',
          userId: ''
        }
      ],
      taxRateOptions: [
        {
          label: '6',
          num: 6
        },
        {
          label: '7',
          num: 7
        },
        {
          label: '8',
          num: 8
        },
        {
          label: '9',
          num: 9
        },
        {
          label: '10',
          num: 10
        },
        {
          label: '11',
          num: 11
        },
        {
          label: '12',
          num: 12
        },
        {
          label: '13',
          num: 13
        }
      ],
      quoteOptions: [
        {
          dictValue: '含税',
          dictKey: 1
        },
        {
          dictValue: '不含税',
          dictKey: 2
        }
      ],
      invoiceOptions: [
        {
          dictValue: '增值税专用发票',
          dictKey: 1
        },
        {
          dictValue: '增值税普通发票',
          dictKey: 2
        },
        {
          dictValue: '增值税电子发票',
          dictKey: 3
        }
      ],
      provinceOptions: [],
      cityOptions: [],
      areaOptions: []
    }
  },

  mounted() {
    if (this.historyObj && JSON.stringify(this.historyObj) != '{}') {
      this.contractObj = this.historyObj
      this.contractAmount = this.historyObj.contractAmount
      this.inBiddList = this.historyObj.withinTheContract || []
      this.biddMaterials = this.historyObj.outsideTheContract || []
      // 文件列表
      let urlarr = []
      let titlearr = []
      if (!this.contractObj.contractUrl) {
        this.contractObj.contractUrl = '[]'
        this.contractObj.contractUrl = JSON.parse(this.contractObj.contractUrl)
      } else {
        // 将url字符串转数组
        urlarr = JSON.parse(this.contractObj.contractUrl)
        this.contractObj.contractUrl = JSON.parse(this.contractObj.contractUrl)
        this.contractObj.contractUrl = []
      }
      if (!this.contractObj.contractTitle) {
        this.contractObj.contractTitle = '[]'
        this.contractObj.contractTitle = JSON.parse(this.contractObj.contractTitle)
      } else {
        titlearr = JSON.parse(this.contractObj.contractTitle)
        this.contractObj.contractTitle = JSON.parse(this.contractObj.contractTitle)
        this.contractObj.contractTitle = []
      }
      if (urlarr.length) {
        urlarr.forEach((item, index) => {
          // 存在之前保存的url  将其push到 文件列表中展示
          this.fileList.push({
            name: titlearr[index],
            url: item
          })
        })
      }
      this.biddListTotal = [...this.biddMaterials, ...this.inBiddList]
      return false
    }
    if (this.apply) {
      this.$set(this.contractObj, 'id', this.contractId)
      this.getData()
    } else {
      if (this.contractId) {
        // 合同id存在代表是查看或者是编辑
        this.$set(this.contractObj, 'id', this.contractId)
        this.getData()
      } else {
        this.$set(this.contractObj, 'contractPurchaseList', [])
        this.$set(this.contractObj, 'contractBuyer', '')
        this.$set(this.contractObj, 'contractAmount', 0)
        this.$set(this.contractObj, 'contractForm', null)
        this.$set(this.contractObj, 'taxRate', null)
        this.$set(this.contractObj, 'contractUrl', [])
        this.$set(this.contractObj, 'contractTitle', [])
        this.$set(this.contractObj, 'quotationRequest', null)
        if (this.create || !this.check) {
          this.getSelect()
          this.getBiddingList()
        }
      }
    }
  },
  computed: {
    loadHeader() {
      let token = this.common.getCookie('materialsToken')
      const header = {}
      header[this.GLOBAL.tokenName] = token
      return header
    }
  },
  filters: {
    contractFormFilter(val) {
      switch (val) {
        case 1:
          return '固定总价'
        case 2:
          return '固定单价'
        case 3:
          return '可调总价'
        case 4:
          return '可调单价'
        case 5:
          return '用户自定义'
        default:
          break
      }
    }
  },
  methods: {
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0 && columnIndex === 7) {
        //指定坐标
        if (this.checkEff) {
          return 'background: #fff4f2'
        } else {
          return { padding: '0px', background: '#F2F3F7' }
        }
      } else {
        return { padding: '0px', background: '#F2F3F7' }
      }
    },
    contractChange(val) {
      this.$https({
        method: 'post',
        url: '/contract/changesAndCancellations',
        data: this.contractObj
      })
        .then(res => {
          if (res.code === 0) {
            this.$message.success('操作成功')
            if (val === 1) {
              if (this.isReduce) {
                this.$emit('applyclose')
                this.$emit('applys')
              } else {
                this.$emit('apply')
              }
            } else {
              this.$emit('apply')
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    applys() {
      this.$emit('apply')
    },
    // 打开申请变更编辑页
    applyVisiableShow() {
      this.conVisible = true
    },
    // 申请取消
    applyCancel() {
      this.$confirm('是否申请取消?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.contractObj.contractUrl = JSON.stringify(this.contractObj.contractUrl)
        this.contractObj.contractTitle = JSON.stringify(this.contractObj.contractTitle)
        this.$set(this.contractObj, 'contractPurchaseList', this.biddListTotal)
        this.contractObj.updateTime = new Date(this.contractObj.updateTime)
        this.contractObj.takeEffectDate = new Date(this.contractObj.takeEffectDate)
        this.contractObj.createTime = new Date(this.contractObj.createTime)
        this.contractObj.winningTime = new Date(this.contractObj.winningTime)
        this.contractObj.type = 2
        this.contractChange(2)
      })
    },
    applyclose() {
      this.conVisible = false
    },
    applyVisiableCancel() {
      if (this.isReduce) {
        this.$emit('applyclose')
      } else {
        this.$emit('apply')
      }
    },
    // 申请变更
    applyChange() {
      this.$set(this.contractObj, 'contractPurchaseList', [...this.biddMaterials, ...this.inBiddList])
      this.contractObj.type = 1
      this.contractChange(1)
    },

    closeSignContract() {
      this.$emit('save')
    },
    subSign() {
      if (!this.contractPassword) {
        this.$message.error('请输入签署密码')
        return false
      }
      if (this.contractPassword.length < 6 || this.contractPassword.length > 12) {
        this.$message.error('请输入6-12位密码')
        return false
      } else if (this.enterpriseType == 2 && !this.publicBankAccountId) {
        this.$message.error('请选择银行卡账号')
        return false
      } else if (this.enterpriseType == 1 && !this.invoiceHeaderId) {
        this.$message.error('请选择开票抬头')
        return false
      }
      if (this.contractPassword != this.contractPasswordSure) {
        this.$message.error('两次输入的密码不一致')
        return false
      }
      this.$https({
        method: 'post',
        url: '/contract/signContract',
        data: {
          id: this.contractId,
          signedSecret: this.contractPassword,
          publicBankAccountId: this.publicBankAccountId,
          invoiceHeaderId: this.invoiceHeaderId
        }
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('操作成功')
          this.signedVisiable = false
          this.closeSignContract()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getInvoiceOptions() {
      this.$https({
        method: 'post',
        url: '/invoiceHeader/getHeaderList',
        data: {
          enterpriseId: localStorage.getItem('enterpriseId')
        }
      })
        .then(res => {
          if (res.code == 0) {
            console.log(res.data)
            this.invoiceHeaderOptions = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    closeSign() {
      this.signedVisiable = false
    },
    signedBtn() {
      this.signedFrom = {
        time: this.contractObj.biddingNo,
        No: this.contractObj.contractNo,
        price: this.contractObj.contractAmount,
        type: this.contractObj.contractForm,
        proName: this.contractObj.proName,
        address:
          this.contractObj.province + this.contractObj.city + this.contractObj.area + this.contractObj.detailAddress,
        biddingName: this.contractObj.enterpriseName,
        bidName: this.componyName,
        signeBidding: this.contractObj.contractBuyer,
        biddingMan: this.contractObj.procurementContact
      }
      this.bankOptions = this.contractObj.publicBankAccountList
      if (this.enterpriseType == 1) {
        this.getInvoiceOptions()
      }

      this.signedVisiable = true
    },
    // 计算总价
    calculatePrice() {
      let price = 0
      this.inBiddList.forEach(item => {
        if (item.purchaseQuantity && item.unitPrice) {
          price = price + +(item.purchaseQuantity * item.unitPrice)
        }
      })
      this.biddMaterials.forEach(item => {
        if (item.purchaseQuantity && item.unitPrice) {
          price = price + +(item.purchaseQuantity * item.unitPrice)
        }
      })
      this.contractAmount = price.toFixed(2)
    },
    // 标书外计算
    contractPriceCopy(e, index, prop) {
      if (e) {
        if (prop === 'purchaseQuantity') {
          if (!this.common.fieldTest('count', e)) {
            this.biddMaterials[index][prop] = 0
            this.$message.error('你输入的数量格式有误或超出范围,请重新输入')
            this.$set(this.biddMaterials[index], 'taxes', '')
            this.$set(this.biddMaterials[index], 'excludingTax', '')
            this.$set(this.biddMaterials[index], 'totalPrice', '')
            this.calculatePrice()
            return false
          }
        } else {
          if (!this.common.fieldTest('money', e)) {
            this.biddMaterials[index][prop] = 0
            this.$message.error('你输入的单价格式有误或超出范围,请重新输入')
            this.$set(this.biddMaterials[index], 'taxes', '')
            this.$set(this.biddMaterials[index], 'excludingTax', '')
            this.$set(this.biddMaterials[index], 'totalPrice', '')
            this.calculatePrice()
            return false
          }
        }
      }

      this.$set(this.biddMaterials[index], prop, e)
      if (this.biddMaterials[index].unitPrice && this.biddMaterials[index].purchaseQuantity) {
        let price = (this.biddMaterials[index].unitPrice * 100 * this.biddMaterials[index].purchaseQuantity) / 100
        this.$set(this.biddMaterials[index], 'totalPrice', price.toFixed(2))
        if (this.biddMaterials[index].taxRate) {
          // 税金
          let taxes = (this.biddMaterials[index].taxRate * this.biddMaterials[index].totalPrice) / 100
          this.$set(this.biddMaterials[index], 'taxes', taxes.toFixed(2))
          // 不含税金额
          let excludingTax = this.biddMaterials[index].totalPrice - this.biddMaterials[index].taxes
          this.$set(this.biddMaterials[index], 'excludingTax', excludingTax.toFixed(2))
        }
      } else {
        this.$set(this.biddMaterials[index], 'taxes', '')
        this.$set(this.biddMaterials[index], 'excludingTax', '')
        this.$set(this.biddMaterials[index], 'totalPrice', '')
      }
      this.calculatePrice()
    },
    // 标书内计算
    contractPrice(e, index, prop) {
      if (e) {
        if (prop === 'purchaseQuantity') {
          if (!this.common.fieldTest('count', e)) {
            this.inBiddList[index][prop] = 0
            this.$message.error('你输入的数量格式有误或超出范围,请重新输入')
            this.$set(this.inBiddList[index], 'taxes', '')
            this.$set(this.inBiddList[index], 'excludingTax', '')
            this.$set(this.inBiddList[index], 'totalPrice', '')
            this.calculatePrice()
            return false
          }
        } else {
          if (!this.common.fieldTest('money', e)) {
            this.inBiddList[index][prop] = 0
            this.$message.error('你输入的单价格式有误或超出范围,请重新输入')
            this.$set(this.inBiddList[index], 'taxes', '')
            this.$set(this.inBiddList[index], 'excludingTax', '')
            this.$set(this.inBiddList[index], 'totalPrice', '')
            this.calculatePrice()
            return false
          }
        }
      }
      this.$set(this.inBiddList[index], prop, e)
      if (this.inBiddList[index].unitPrice && this.inBiddList[index].purchaseQuantity) {
        let price = (this.inBiddList[index].unitPrice * 100 * this.inBiddList[index].purchaseQuantity) / 100
        this.$set(this.inBiddList[index], 'totalPrice', price.toFixed(2))
        if (this.inBiddList[index].taxRate) {
          // 税金
          let taxes = (this.inBiddList[index].taxRate * this.inBiddList[index].totalPrice) / 100
          this.$set(this.inBiddList[index], 'taxes', taxes.toFixed(2))
          // 不含税金额
          let excludingTax = this.inBiddList[index].totalPrice - this.inBiddList[index].taxes
          this.$set(this.inBiddList[index], 'excludingTax', excludingTax.toFixed(2))
        }
      } else {
        this.$set(this.inBiddList[index], 'taxes', '')
        this.$set(this.inBiddList[index], 'excludingTax', '')
        this.$set(this.inBiddList[index], 'totalPrice', '')
      }

      this.calculatePrice()
    },
    // 删除标书外
    delTableItemBid(index) {
      if (!this.create) {
        if (this.biddMaterials[index].id) {
          this.contractObj.contractPurchaseIdList.push(this.biddMaterials[index].id)
        }
      }

      this.biddMaterials.splice(index, 1)
      if (!this.biddMaterials.length) {
        this.materialList = []
        this.tableShow = false
      }

      this.calculatePrice()
    },
    // 删除标书内一项材料
    delTableItem(index) {
      // 不是创建则记录删除材料的id
      if (!this.create) {
        if (this.inBiddList[index].id) {
          this.contractObj.contractPurchaseIdList.push(this.inBiddList[index].id)
        }
      }
      this.inBiddList.splice(index, 1)

      this.calculatePrice()
    },

    selectFocus(e, id) {
      // 根据材料id获取规格型号
      if (e) {
        if (id) {
          this.$https({
            url: '/material/listMaterialSpecsByMaterialId/?materialId=' + +id,
            method: 'post'
          })
            .then(res => {
              if (res.code === 0) {
                this.biddMaterials.forEach(element => {
                  if (id === element.materialId) {
                    this.$set(element, 'modelSelectList', res.data)
                  }
                })
              } else {
                this.$message.error(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          this.$message.error('请选择材料名称')
        }
      }
    },
    // 品类改变时清空规格型号以及单位
    typeChange(e, index) {
      this.materialList.forEach(item => {
        if (item.materialId === e) {
          this.$set(this.biddMaterials[index], 'materialName', item.materialName)
        }
      })
      this.$set(this.biddMaterials[index], 'model', '')
      this.$set(this.biddMaterials[index], 'company', '')
    },
    // 规格型号改变时设置单位
    categoryChange(val) {
      this.biddMaterials.forEach(element => {
        if (val === element.model) {
          element.modelSelectList.forEach(el => {
            if (el.specsName === val) {
              this.$set(element, 'company', el.materialUnit)
            }
          })
        }
      })
    },
    // 选择标书外材料弹窗关闭
    materialClose(e) {
      let el
      if (e.length > 0) {
        e.forEach(item => {
          if (item.dj === 3) {
            el = JSON.parse(
              JSON.stringify(e)
                .replace(/id/g, 'materialId')
                .replace(/fatherId/g, 'typeTwoId')
            )
          }
          this.biddMaterials.push({
            materialName: '',
            model: '',
            company: '',
            parameterIndex: '',
            brandOrigin: '',
            purchaseQuantity: '',
            unitPrice: '',
            taxRate: this.contractObj.taxRate || '',
            excludingTax: '',
            taxes: '',
            materialId: '',
            totalPrice: '',
            productTypes: 2,
            modelSelectList: []
          })
        })
        this.tableShow = true
        // 去重数组对象中重复的对象
        const deteleObject = obj => {
          var uniques = []
          var stringify = {}
          for (var i = 0; i < obj.length; i++) {
            // 获取数组当前项对象的所有key值
            var keys = Object.keys(obj[i])
            // 排序
            keys.sort(function (a, b) {
              return Number(a) - Number(b)
            })
            var str = ''
            for (var j = 0; j < keys.length; j++) {
              str += JSON.stringify(keys[j])
              str += JSON.stringify(obj[i][keys[j]])
            }
            if (!Object.prototype.hasOwnProperty.call(stringify, str)) {
              // 将不存在原数组的对象push进去
              uniques.push(obj[i])
              stringify[str] = true
            }
          }
          let arr = [...uniques]
          return arr
        }
        let marterial = []
        el.forEach(item => {
          marterial.push({
            materialId: item.materialId,
            materialName: item.materialName
          })
        })
        this.materialList = deteleObject([...new Set([...this.materialList, ...marterial])])
      } else {
        // this.biddFrom.addBiddingContentDtoList = []
      }

      this.materialVisible = false
    },
    //选择人员弹窗关闭
    personClose(e) {
      if (this.personType == 'contact') {
        this.contractObj.procurementContact = e.userName
        this.contractObj.contactPhone = e.phone
        this.contractObj.procurementUserId = e.id
      } else if (this.personType == 'technology') {
        this.contractObj.acceptanceContact = e.userName
        this.contractObj.technologyPhone = e.phone
        this.contractObj.acceptanceUserId = e.id
      } else if (this.personType == 'supplier') {
        this.contractObj.supplierContact = e.userName
        this.contractObj.scTechnologyPhone = e.phone
        this.contractObj.supplierUserId = e.id
      } else if (this.personType == 'acceptor') {
        this.contractObj.acceptor = e.userName
        this.contractObj.acceptorUserId = e.id
      } else {
        this.reviewerList[this.reviewerIndex].reviewer = e.userName
        this.reviewerList[this.reviewerIndex].userId = e.id
      }
      this.personVisible = false
    },
    //选择联系人
    personnelSelect(type, index) {
      this.reviewerIndex = index
      this.personVisible = true
      this.personType = type
    },
    decimalChange(val, refName) {
      if (val) {
        // 校验保证金输入框
        if (!this.common.fieldTest('decimal', val)) {
          //清空
          this.$refs[refName].clear()
          this.$message.error('你输入的数字格式有误或太小，最多输入小数点后4位')
        }
      }
    },
    taxRateChange(val) {
      // 选择税率时改变标书内外清单的税率
      this.inBiddList.forEach(item => {
        this.$set(item, 'taxRate', val)
        if (item.unitPrice && item.purchaseQuantity) {
          // 税金
          let taxes = (item.taxRate * item.totalPrice) / 100
          this.$set(item, 'taxes', taxes.toFixed(2))
          // 不含税金额
          let excludingTax = item.totalPrice - item.taxes
          this.$set(item, 'excludingTax', excludingTax.toFixed(2))
        }
      })
      this.biddMaterials.forEach(item => {
        this.$set(item, 'taxRate', val)
        if (item.unitPrice && item.purchaseQuantity) {
          // 税金
          let taxes = (item.taxRate * item.totalPrice) / 100
          this.$set(item, 'taxes', taxes.toFixed(2))
          // 不含税金额
          let excludingTax = item.totalPrice - item.taxes
          this.$set(item, 'excludingTax', excludingTax.toFixed(2))
        }
      })
    },
    // 添加标书内材料
    inTenderClose(val) {
      this.inTenderVisible = false
      if (val.length) {
        val.forEach(item => {
          delete item.id
          // this.$set(item, 'id', null)
          this.inBiddList.push(item)
        })
      }
    },
    // 添加材料弹窗
    addMaterial(val) {
      if (val === '标书内') {
        this.inTenderVisible = true
      } else {
        this.materialVisible = true
      }
    },
    // 查看工程详情
    checkProDetail(id) {
      this.projectFrom = {}
      this.$https({
        method: 'post',
        url: '/government/listProjectByProjectId?projectId=' + id
      })
        .then(res => {
          if (res.code === 0) {
            this.projectFrom = res.data
            this.projectVisible = true
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 删除文件
    fileRemove(file, files) {
      this.fileList = files
      this.num = this.fileList.length
    },
    // 文件上传前进行文件大小检测
    beforeUpload(file) {
      this.fileSuccess = false
      const isLt = file.size / 1024 / 1024 / 10 <= 1
      if (!isLt) {
        this.$message.error('单个文件大小不能超过10M,请检查文件大小并重新尝试')
      }
      return isLt
    },
    // 文件上传前判断是否超过同时上传文件个数限制
    onExceed() {
      this.$message.error('最多支持同时上传3个文件，请重新上传')
    },
    // 上传成功时的回调
    uploadSuccess(val, e, el) {
      if (e.response.code != 0) {
        this.$message.error(e.response.msg)
        return false
      }
      this.num++
      if (this.num == el.length) {
        this.num = el.length
        this.fileSuccess = true
      }
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.$message.success('上传成功')
      }, 200)
      this.fileList = el
    },
    downFile(file) {
      this.common
        .getBlob(file.url)
        .then(res => {
          this.common.saveAs(res, file.name)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 文件模板下载
    fileDownload() {
      this.common
        .getBlob(this.fileTemplateUrl)
        .then(res => {
          this.common.saveAs(res, '合同文件模板.doc')
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 触发上传
    uploadClick() {
      this.$refs.biddUpload.click()
    },
    //获取省份
    getSelect() {
      this.common.getAddressList('province').then(value => {
        this.provinceOptions = value
      })
    },
    //选完省后获取市
    provinceChange(e, clear) {
      if (clear) {
        this.contractObj.city = ''
        this.contractObj.area = ''
        this.contractObj.cityId = ''
        this.contractObj.areaId = ''
      }
      this.provinceOptions.forEach(item => {
        if (e == item.provinceId) {
          this.contractObj.province = item.province
        }
      })

      this.common.getAddressList('city', e).then(value => {
        this.cityOptions = value
      })
    },
    //选完市后获取区
    cityChange(e, clear) {
      if (clear) {
        this.contractObj.area = ''
        this.contractObj.areaId = ''
      }
      this.cityOptions.forEach(item => {
        if (e == item.cityId) {
          // 设置区名
          this.contractObj.city = item.city
        }
      })
      this.common.getAddressList('area', e).then(value => {
        this.areaOptions = value
      })
    },
    // 选择区时设置区名
    areaChange(e) {
      this.areaOptions.forEach(item => {
        if (e == item.areaId) {
          this.contractObj.area = item.area
        }
      })
    },
    //添加审核人
    addReviewer() {
      if (this.reviewerList.length < 5) {
        this.reviewerList.push({
          reviewer: '',
          userId: ''
        })
      } else {
        this.$message.error('最多添加5位审核人员')
      }
    },
    //删除审核人
    colseReviewer(index) {
      if (this.reviewerList.length > 1) {
        this.$confirm('是否删除审核人?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.reviewerList.splice(index, 1)
          })
          .catch(() => {})
      } else {
        this.$message.error('审核人不能少于一个')
      }
    },
    // 关闭合同
    closeBtn() {
      this.fileList = []
      this.contractObj = {}
      this.inBiddList = []
      this.biddMaterials = []
      this.$emit('close')
    },
    // 暂存按钮
    saveBtn() {
      // // 设置标书内清单税金，不含税金额，总价
      // this.inBiddList.forEach(item => {
      //   this.$set(item, 'totalPrice', item.purchaseQuantity * item.unitPrice)
      //   this.$set(
      //     item,
      //     'excludingTax',
      //     item.purchaseQuantity * item.unitPrice - (item.purchaseQuantity * item.unitPrice * item.taxRate) / 100
      //   )
      //   this.$set(item, 'taxes', (item.purchaseQuantity * item.unitPrice * item.taxRate) / 100)
      // })
      // // 设置标书外
      // this.biddMaterials.forEach(item => {
      //   // 总价
      //   this.$set(item, 'totalPrice', item.purchaseQuantity * item.unitPrice)
      //   // 不含税金额
      //   this.$set(
      //     item,
      //     'excludingTax',
      //     item.purchaseQuantity * item.unitPrice - (item.purchaseQuantity * item.unitPrice * item.taxRate) / 100
      //   )
      //   // 税金
      //   this.$set(item, 'taxes', (item.purchaseQuantity * item.unitPrice * item.taxRate) / 100)
      // })
      if (this.biddMaterials.length > 0) {
        let flag = this.biddMaterials.some(item => {
          return item.materialId
        })
        if (!flag) {
          this.$message.error('请至少填写一条标书外数据')
          return false
        }
      }
      if (!this.fileSuccess) {
        this.$message.error('请等待文件上传完毕')
        return false
      } else {
        //   文件
        this.contractObj.contractUrl = []
        this.contractObj.contractTitle = []
        if (this.fileList.length) {
          this.fileList.forEach(item => {
            if (item.url) {
              this.contractObj.contractUrl.push(item.url)
            } else {
              this.contractObj.contractUrl.push(item.response.data)
            }
            this.contractObj.contractTitle.push(item.name)
          })
        }
      }
      // 如果税率等于null
      if (this.contractObj.taxRate == null) {
        this.contractObj.taxRate = 0
      }
      // 设置类型为保存类型
      this.$set(this.contractObj, 'type', 1)
      // 合并合同内外材料清单
      this.contractObj.contractPurchaseList = [...this.inBiddList, ...this.biddMaterials]
      let price = 0

      this.contractObj.contractPurchaseList.forEach(item => {
        if (item.totalPrice) {
          price = price + +item.totalPrice
        }
        this.$set(item, 'createTime', '')
        if (!item.taxRate) {
          this.$set(item, 'taxRate', this.contractObj.taxRate)
        }

        if (item.unitPrice && item.purchaseQuantity) {
          // 税金
          let taxes = (item.taxRate * item.totalPrice) / 100
          this.$set(item, 'taxes', taxes.toFixed(2))
          // 不含税金额
          let excludingTax = item.totalPrice - item.taxes
          this.$set(item, 'excludingTax', excludingTax.toFixed(2))
        } else {
          this.$set(item, 'totalPrice', 0)
          this.$set(item, 'taxes', 0)
          this.$set(item, 'excludingTax', 0)
        }
        if (!item.unitPrice) {
          this.$set(item, 'unitPrice', 0)
        }
        if (!item.purchaseQuantity) {
          this.$set(item, 'purchaseQuantity', 0)
        }
      })
      this.fileList = []
      this.contractObj.contractUrl = JSON.stringify(this.contractObj.contractUrl)
      this.contractObj.contractTitle = JSON.stringify(this.contractObj.contractTitle)
      this.contractObj.contractAmount = price.toFixed(2)
      // 过滤不为空的审核人
      this.contractObj.contractReviewerDtoList = this.reviewerList.filter(item => {
        return item.userId != ''
      })
      // 为审核人添加审核顺序
      this.contractObj.contractReviewerDtoList.forEach((item, index) => {
        this.$set(item, 'sorting', index + 1)
      })
      if (this.contractId) {
        this.updateContract()
      } else {
        this.saveContract()
      }
    },
    // 确定按钮
    subBtn() {
      // 过滤出审核人id存在的
      this.contractObj.contractReviewerDtoList = this.reviewerList.filter(item => {
        return item.userId
      })
      // 判断标书内清单是否存在未填写数量以及单价的
      let inBidFlag = this.inBiddList.some(item => {
        return !item.purchaseQuantity || !item.unitPrice
      })

      if (!this.fileSuccess) {
        this.$message.error('请等待文件上传完毕')
        return false
      } else {
        this.contractObj.contractUrl = []
        this.contractObj.contractTitle = []
        if (this.fileList.length) {
          this.fileList.forEach(item => {
            if (item.url) {
              this.contractObj.contractUrl.push(item.url)
            } else {
              this.contractObj.contractUrl.push(item.response.data)
            }
            this.contractObj.contractTitle.push(item.name)
          })
        }
      }
      if (this.creat && !this.contractObj.biddingId) {
        this.$message.error('请选择招标编号')
        return false
      }
      if (!this.contractObj.contractBuyer) {
        this.$message.error('请填写签约采购商')
        return false
      } else if (
        !this.contractObj.areaId ||
        !this.contractObj.provinceId ||
        !this.contractObj.cityId ||
        !this.contractObj.detailAddress
      ) {
        this.$message.error('请精确填写交付地点')
        return false
      } else if (!this.contractObj.contractForm) {
        this.$message.error('请选择合同形式')
        return false
      } else if (inBidFlag) {
        this.$message.error('请填写标书内清单的数量与单价')
        return false
        // 如果存在标书外清单
      } else if (this.tableShow) {
        let outBidFlag
        outBidFlag = this.biddMaterials.some(item => {
          return !item.model || !item.purchaseQuantity || !item.unitPrice
        })
        if (outBidFlag) {
          this.$message.error('请填写标书外清单的规格型号，数量以及单价')
          return false
        }
      } else if (!this.contractObj.quotationRequest) {
        this.$message.error('请选择报价要求')
        return false
      } else if (!this.contractObj.invoiceRequirements || !this.contractObj.taxRate) {
        this.$message.error('请选择发票要求以及税率')
        return false
      } else if (!this.contractObj.margin) {
        this.$message.error('请填写履约保证金')
        return false
      } else if (!this.contractObj.procurementContact) {
        this.$message.error('请选择采购方联系人')
        return false
      } else if (!this.contractObj.acceptanceContact) {
        this.$message.error('请选择验收联系人')
        return false
      } else if (!this.componyType && !this.contractObj.supplierContact) {
        this.$message.error('请选择供应商联系人')
        return false
      } else if (!this.contractObj.signingMethod) {
        this.$message.error('请选择合同签署方式')
        return false
      } else if (!this.contractObj.contractUrl.length) {
        this.$message.error('请上传合同文件')
        return false
      } else if (!this.contractObj.contractReviewerDtoList.length) {
        this.$message.error('请选择审核人')
        return false
      } else if (!this.contractObj.acceptor) {
        this.$message.error('请选择验收人')
        return false
      }
      // 合并合同内外材料清单
      this.contractObj.contractPurchaseList = [...this.inBiddList, ...this.biddMaterials]
      let price = 0
      if (this.contractObj.contractPurchaseList.length == 0) {
        this.$message.error('请添加材料')
        return false
      }
      this.contractObj.contractPurchaseList.forEach(item => {
        if (item.totalPrice) {
          price = price + +item.totalPrice
        }
        this.$set(item, 'createTime', '')
      })
      this.contractObj.contractAmount = price.toFixed(2)
      // 设置类型为提交
      this.$set(this.contractObj, 'type', 2)

      this.contractObj.contractReviewerDtoList.forEach((item, index) => {
        this.$set(item, 'sorting', index + 1)
      })

      this.contractObj.contractUrl = JSON.stringify(this.contractObj.contractUrl)
      this.contractObj.contractTitle = JSON.stringify(this.contractObj.contractTitle)
      this.fileList = []
      if (this.apply) {
        this.applyChange()
        return false
      }
      if (this.contractId) {
        this.updateContract()
      } else {
        this.saveContract()
      }
    },
    // 修改合同
    updateContract() {
      if (this.contractObj.contractBuyer) {
        this.$set(this.contractObj, 'billId', 666)
      }
      this.$https({
        method: 'post',
        url: '/contract/updateContract',
        data: this.contractObj
      })
        .then(res => {
          if (res.code === 0) {
            this.$message.success('操作成功')
            this.contractObj = {}
            this.inBiddList = []
            this.biddMaterials = []
            this.$emit('save')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 创建新合同
    saveContract() {
      if (this.contractObj.contractBuyer) {
        this.$set(this.contractObj, 'billId', 666)
      }
      this.$https({
        method: 'post',
        url: '/contract/addContract',
        data: this.contractObj
      })
        .then(res => {
          if (res.code === 0) {
            this.$message.success('操作成功')
            this.contractObj = {}
            this.inBiddList = []
            this.biddMaterials = []
            this.$emit('save')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    projectChange() {
      this.getListData()
      this.getInformation()
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    },
    // 招标编号下拉
    getBiddingList() {
      this.$https({
        method: 'post',
        url: '/contract/queryBidNumber',
        data: {}
      })
        .then(res => {
          if (res.code === 0) {
            this.projetOptions = res.data
            if (this.biddingId) {
              this.$set(this.contractObj, 'biddingId', this.biddingId)
            } else {
              if (!this.projetOptions.length) {
                this.$message.error('暂无合同数据，请前往发布招标')
                return false
              }
              this.$set(this.contractObj, 'biddingId', this.projetOptions[0]['id'])
            }
            this.getInformation()
            this.getListData()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 编辑或者查看时调用接口
    getData() {
      this.$https({
        method: 'post',
        url: '/contract/queryContract',
        data: {
          id: this.contractId
        }
      })
        .then(res => {
          if (res.code === 0) {
            // 总价
            this.contractAmount = res.data.contractAmount
            this.contractObj = res.data
            // 审核人
            if (res.data.contractReviewerDtoList === null) {
              this.reviewerList = [{ reviewer: '', userId: '' }]
            } else {
              this.reviewerList = res.data.contractReviewerDtoList.length
                ? res.data.contractReviewerDtoList
                : [{ reviewer: '', userId: '' }]
            }

            //  标书内清单
            this.inBiddList = res.data.withinTheContract || []

            // 标书外清单
            this.biddMaterials = res.data.outsideTheContract || []
            this.biddMaterials.forEach(item => {
              // 标书外下拉菜单
              this.materialList.push({
                materialId: item.materialId,
                materialName: item.materialName
              })
            })
            // 文件列表
            let urlarr = []
            let titlearr = []
            if (!this.contractObj.contractUrl) {
              this.contractObj.contractUrl = '[]'
              this.contractObj.contractUrl = JSON.parse(this.contractObj.contractUrl)
            } else {
              // 将url字符串转数组
              urlarr = JSON.parse(this.contractObj.contractUrl)
              this.contractObj.contractUrl = JSON.parse(this.contractObj.contractUrl)
              this.contractObj.contractUrl = []
            }
            if (!this.contractObj.contractTitle) {
              this.contractObj.contractTitle = '[]'
              this.contractObj.contractTitle = JSON.parse(this.contractObj.contractTitle)
            } else {
              titlearr = JSON.parse(this.contractObj.contractTitle)
              this.contractObj.contractTitle = JSON.parse(this.contractObj.contractTitle)
              this.contractObj.contractTitle = []
            }
            if (urlarr.length) {
              urlarr.forEach((item, index) => {
                // 存在之前保存的url  将其push到 文件列表中展示
                this.fileList.push({
                  name: titlearr[index],
                  url: item
                })
              })
            }
            if (this.fileList.length) {
              this.num = this.fileList.length
            }
            if (this.apply) {
              this.getInformation()
            }

            if (this.biddMaterials.length) {
              this.tableShow = true
            }
            if (this.check) {
              // 查看时将标书内外材料合并查看
              this.biddListTotal = [...this.biddMaterials, ...this.inBiddList]
            } else {
              this.$set(this.contractObj, 'contractPurchaseIdList', [])
              this.contractObj.winningTime = new Date(this.contractObj.winningTime)
              this.getSelect()
              // 获取市列表
              this.provinceChange(res.data.provinceId, '')
              // 设置区列表
              this.cityChange(res.data.cityId, '')
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 获取采购清单列表
    getListData() {
      this.$https({
        method: 'post',
        url: '/contract/queryBiddingPurchaseList',
        data: {
          id: this.contractObj.biddingId
        }
      })
        .then(res => {
          if (res.code === 0) {
            let arr = res.data
            arr.forEach(item => {
              this.$set(item, 'isHave', false)
              this.$set(item, 'productTypes', 1)
              this.$set(item, 'parameterIndex', '')
              this.$set(item, 'brandOrigin', '')
              this.$set(item, 'taxRate', null)
              this.$set(item, 'taxes', '')
              this.$set(item, 'totalPrice', '')
              this.$set(item, 'excludingTax', '')
            })
            this.inBiddList = [...arr]
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 根据招标id获取部分信息
    getInformation() {
      this.$https({
        method: 'post',
        url: '/contract/queryBiddingInformation',
        data: {
          id: this.contractObj.biddingId
        }
      })
        .then(res => {
          if (res.code === 0) {
            if (this.apply) {
              this.fileTemplateUrl = res.data.fileTemplateUrl
              return false
            }
            this.fileTemplateUrl = res.data.fileTemplateUrl
            this.$set(this.contractObj, 'provinceId', '')
            this.$set(this.contractObj, 'cityId', '')
            this.$set(this.contractObj, 'areaId', '')
            this.$set(this.contractObj, 'biddingNo', '')
            // 获取市列表
            this.provinceChange(res.data.provinceId)
            // 设置区列表
            this.cityChange(res.data.cityId)
            this.projetOptions.forEach(item => {
              if (item.id == this.contractObj.biddingId) {
                this.contractObj.biddingNo = item.biddingNo
              }
            })
            this.$set(this.contractObj, 'winningTime', new Date(res.data.winTime))
            this.$set(this.contractObj, 'proName', res.data.proName)
            this.$set(this.contractObj, 'proId', res.data.proId)
            this.$set(this.contractObj, 'enterpriseName', res.data.biddingEnterprise)
            this.$set(this.contractObj, 'reviewMind', res.data.calibratedNote)
            this.$set(this.contractObj, 'biddingContent', res.data.materialInfo)
            this.$set(this.contractObj, 'province', res.data.province)
            this.$set(this.contractObj, 'city', res.data.city)
            this.$set(this.contractObj, 'area', res.data.area)
            this.$set(this.contractObj, 'detailAddress', res.data.detailAddress)
            this.contractObj.provinceId = res.data.provinceId
            this.contractObj.cityId = res.data.cityId
            this.contractObj.areaId = res.data.areaId
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
.applyBtn {
  width: calc(100% - 80px);
  padding: 30px 0 30px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 0;
  z-index: 9999;
}
.signfooter {
  text-align: center;
  margin-top: 40px;
}
.signedFrom {
  margin-top: 7px;
  width: 100%;
  .el-form-item {
    width: 46% !important;
    margin-bottom: 0px !important;
  }
  .form-item {
    width: 100% !important;
    /deep/.el-form-item__content {
      display: flex;
    }
    .el-input {
      width: 260px;
    }
  }

  .performance_text {
    color: #999;
    font-size: 14px;
  }
  .icon-guanbianniu {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
  }
  .icon-guanbianniu:hover {
    color: #fa7355;
  }
}
#contractfrom {
  h4 {
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    width: 118px;
    text-align: right;
    padding-right: 12px;
  }
  .buyfrom {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
  .mgn {
    margin-top: 20px;
  }
  .footer {
    text-align: center;
    margin-top: 29px;
  }
  .auditfrom {
    margin: 16px 0 0;
    .el-form-item {
      width: 43% !important;
      margin-bottom: 16px !important;
    }
  }
  .contract_file {
    color: #fa7355;
    height: 14px;
    line-height: 14px;
    margin-top: 10px;
  }
}

.commonFrom {
  margin-top: 7px;
  width: 88%;
  .el-form-item {
    width: 40% !important;
    margin-bottom: 7px !important;
  }
  .form-item {
    width: 100% !important;
    /deep/.el-form-item__content {
      display: flex;
    }
    .el-input {
      width: 260px;
    }
  }

  .performance_text {
    color: #999;
    font-size: 14px;
  }
  .icon-guanbianniu {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
  }
  .icon-guanbianniu:hover {
    color: #fa7355;
  }
}
h1 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  padding-left: 10px;
  border-left: 4px solid #fa7355;
  span {
    font-weight: normal;
    color: #999;
  }
}
.ty {
  color: #ff3d3d;
}
.upload-wrap {
  /deep/.el-upload {
    display: none;
  }
  /deep/.el-upload-list {
    display: flex;
    align-items: center;
    width: 600px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    .el-upload-list__item {
      width: 260px;
      margin: 20px 30px 0 0;
      background: #f0f1f2;
      border: 1px solid #d6d6d6;
    }
    .el-icon-close {
      &:hover {
        color: #fa7355;
      }
    }
  }
}
.download {
  margin-bottom: 20px;
  /deep/.el-upload-list__item-name:hover {
    color: #fa7355;
  }
  /deep/ .el-upload {
    display: none !important;
  }
  /deep/ .el-upload-list {
    display: flex;
    align-items: center;
    width: 600px;
    flex-wrap: wrap;
    .el-upload-list__item {
      width: 260px;
      margin: 7px 30px 0 0;
      background: #f0f1f2;
      border: 1px solid #d6d6d6;
    }
    .el-upload-list__item.is-success .el-upload-list__item-status-label {
      display: none;
    }
    .el-upload-list__item .el-icon-close {
      display: none;
      &:hover {
        display: none;
      }
    }
    .el-upload-list__item .el-icon-close-tip {
      display: none;
      &:hover {
        display: none;
      }
    }
  }
}
</style>
